
<template>
  <el-container>
    <el-header>
      <header-bar></header-bar>
    </el-header>
    <el-container>
      <el-aside width="160px">
        <el-menu active-text-color="black" router :default-active="defaultActive">
          <el-menu-item index="/discover">
            <i class="iconfont icon-yinle"></i>

            <span slot="title">发现音乐</span>
          </el-menu-item>
          <el-menu-item index="/video">
            <i class="iconfont  icon-shipin"></i>

            <span slot="title">视频</span>
          </el-menu-item>
          <el-menu-item index="/favorites" disabled>
            <i class="iconfont icon-more"></i>

            <span slot="title">收藏</span>
          </el-menu-item>
          <el-menu-item index="/recommendmusic">
            <i class="iconfont icon-good"></i>
            <template #title>每日推荐</template>

          </el-menu-item>
          <el-menu-item-group>
            <template slot="title" class="groupTitle">创建的歌单</template>
            <el-menu-item v-for="(v,i) in createMusicList" :key="i" :index="`/musiclistdetail/${v.id}`">
              <i class="iconfont icon-gedan"></i>
              {{v.name}}
            </el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <template slot="title" class="groupTitle">收藏的歌单</template>
            <el-menu-item v-for="(v,i) in collectedMusicList" :key="i" :index="`/musiclistdetail/${v.id}`">
              <i class="iconfont icon-gedan"></i>
              {{v.name}}
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view class="routerView"></router-view>
        <a :download="downloadMusicInfo.name" :href="downloadMusicInfo.url" target="_blank" id="downloadCurrentMusic"> </a>
      </el-main>
    </el-container>
    <bottom-control></bottom-control>
    <music-detail-card class="musicDetailCard"></music-detail-card>
  </el-container>
</template>

<script>
import axios from 'axios'
import { reqUserCollectMusicList } from '@/network/api'
import BottomControl from '@/components/bottomControl/BottomControl.vue'
import HeaderBar from '@/components/headerBar/HeaderBar.vue'
import MusicDetailCard from '@/views/musicDetailCard/MusicDetailCard.vue'
import { reactive, onMounted, inject, watch, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'homeIndex',
  components: { HeaderBar, BottomControl, MusicDetailCard },
  props: {},
  setup() {
    const message = inject('$message')
    const data = reactive({
      defaultActive: '',
      userInfo: {},
      createMusicList: [],
      collectedMusicList: [],
      downloadMusicInfo: {
        name: '',
        url: ''
      }
    })
    const route = useRoute()
    const store = useStore()
    const getUserMusicList = async () => {
      if (!store.state.isLogin) {
        message.error('请先等操作')
        return
      }
      const userInfo = store.state.userInfo
      if (!userInfo.id) {
        return
      }
      this.userInfo = store.state.userInfo
      let res = await reqUserCollectMusicList(this.userInfo.id)
      res = res.data.playlist
      let i = res.findIndex(v => v.subscribe === true)
      data.createMusicList = res.slice(0, i)
      data.collectedMusicList = res.slice(i)
      data.createMusicList[0].name = '我喜欢的音乐'
      store.commit('updateCollectMusicList', data.collectedMusicList)
      store.commit('updateCreatedMusicList', data.createMusicList)
    }
    onMounted(() => {
      data.defaultActive = '/' + route.path.split('/')[1]
      getUserMusicList()
    })
    watch(
      () => {
        return store.state.collectedMusicList
      },
      current => {
        data.collectedMuiscList = current
      }
    )
    watch(
      () => route.path,
      () => {
        data.defaultActive = '/' + route.path.split('/')[1]
      }
    )
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style scoped>
.is-active {
  background: #f6f6f7;
  font-size: 14px;
  font-weight: 600px;
}
.iconfont {
  font-size: 14px;
  margin: 5px !important;
}
.routerView {
  padding: 0 15px;
  width: 100%;
  height: calc(100vh - 105px);
}
.el-header {
  height: 50px !important;
  z-index: 50;
  background-color: var(--red);
}
.el-aside {
  height: calc(100vh - 105px);
  border-right: 1px solid #ccc;
}
.el-menu {
  border: none;
}
.el-menu-item:hover {
  background: #f5f5f6 !important;
}
.el-menu-item {
  font-size: 8px;
  padding: 0 0 0 10px !important ;
  margin: 5px 0 !important;
  height: 30px;
  line-height: 30px;
}
.el-menu-item-group {
  margin-top: 10px;
}
.el-main {
  padding: 0;
  height: calc(100vh - 105px);
}
</style>